import React from 'react';
import { connect } from 'dva';
import TitleLine from 'components/common/titleLine';
import { Timeline, Button, Steps, message } from 'antd';
import withRouter from 'umi/withRouter';
import IMG1 from 'assets/equipmentCheck/wait.png'; // 待我审批
import IMG2 from 'assets/equipmentCheck/ziyuan_1.png'; // 待审批
import IMG3 from 'assets/equipmentCheck/ziyuan_2.png'; // 审批通过
import IMG4 from 'assets/equipmentCheck/ziyuan.png'; // 审批失败
import IMG5 from 'assets/equipmentCheck/ziyuan_3.png'; // 被拒绝以后的待审批
import RejectModel from './RejectModel';

import './index.styl';
const { Step } = Steps

function CheckPanel({ dispatch, list, id, processType, getListAgain, location, linkTo, headerTaps: { panes } }) {
  // 同意与拒绝
  async function rejectItem(comments, taskId, approved) {
    const data = await dispatch({
      type: 'process/approvePro',
      payload: {
        approved,
        comments,
        id,
        processType,
        taskId
      },
    });
    // 再次请求列表数据
    if (data && data.code === '000000') {
      message.success(data.mesg)
      getListAgain()
    }
    if (data && (data.code === '050000' || data.code === '030200')) {
      message.error(data.mesg, 1.5, () => {
        const { pathname } = location
        const panesList = panes.filter(pane => pane.key !== pathname);
        dispatch({
          type: 'headerTaps/updateHeaderTaps',
          payload: { panes: panesList },
        });
        linkTo();
      })
    }
  }

  return (
    <div className="CheckPanel">
      <TitleLine title={'审批记录'} />
      <Timeline>
        {list &&
          list.length > 0 &&
          list.map((item, index) => {
            return (
              <Timeline.Item
                key={item.nodeId}
                dot={<>
                  <span className='dotColor'></span></>}
                className={item.status === 2 ? 'actived' : ''}
              >
                <div className="checkWrapper">
                  <div className="user">
                    <img src={item.headImage !== '/url' ? item.headImage : IMG1} alt="" />
                  </div>
                  <div className="info">
                    <p>
                      <span>审批人：</span>
                      <span className='txt'>{item.name}</span>
                    </p>
                    <p>
                      <span>职位：</span>
                      <span className='txt'>{item.position}</span>
                    </p>
                    {item.status === 4 ? (
                      <div className="checkBtn">
                        <div>
                          <Button
                            type="primary"
                            onClick={() => rejectItem('', item.taskId, true)}
                          >
                            同意
                          </Button>
                        </div>
                        <RejectModel getRejectFn={c => rejectItem(c, item.taskId, false)} />
                      </div>
                    ) : item.status === 2 ? (
                      <p>
                        <span>审批时间：</span>
                        <span className='txt'>{item.auditTime}</span>
                      </p>
                    ) : item.status === 1 ? (
                      <>
                        <p>
                          <span>审批时间：</span>
                          <span className='txt'>{item.auditTime}</span>
                        </p>
                        <p>
                          <span>拒绝原因：</span>
                          <span className='txt'>{item.comments}</span>
                        </p>
                      </>
                    ) : null}
                  </div>
                  <div className='logimg'>
                    <img
                      src={
                        item.status === 4
                          ? IMG1
                          : item.status === 3
                            ? IMG2
                            : item.status === 2
                              ? IMG3
                              : item.status === 0
                                ? IMG5
                                : IMG4
                      }
                      alt=""
                    />
                  </div>
                </div>
              </Timeline.Item>
            );
          })}
      </Timeline>
    </div>
  );
}

CheckPanel.propTypes = {};

export default connect(({ process, headerTaps }) => ({
  process,
  headerTaps,
}))(withRouter(CheckPanel));
